<template>
  <div class="ace-container">
    <div ref="editorRef" class="ep-ace-editor" />
  </div>
</template>

<script>
import { onMounted, onBeforeUnmount, ref, computed } from 'vue'
import ace from 'ace-builds'
import 'ace-builds/src-min-noconflict/mode-javascript' // 导入JavaScript模式
import 'ace-builds/src-min-noconflict/mode-json5' // 导入JSON模式
import 'ace-builds/src-min-noconflict/theme-eclipse' // 导入主题
import 'ace-builds/src-min-noconflict/ext-language_tools' // 可选，代码提示等功能

export default {
  name: 'CodeEditor',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    /** 只读模式 */
    readonly: {
      type: Boolean,
      default: false
    },
    /** 语言模式支持javascript、json、css */
    mode: {
      type: String,
      default: 'javascript'
    },
    /** 显示行号 */
    showGutter: {
      type: Boolean,
      default: true
    },
    /** 最大行数，超过会自动出现滚动条 */
    maxLines: {
      type: Number,
      default: 20
    },
    /** 最小行数 */
    minLines: {
      type: Number,
      default: 20
    },
    /** 是否开启语法检查 */
    userWorker: {
      type: Boolean,
      default: true
    },
    /** 字体大小 */
    fontSize: {
      type: Number,
      default: 14
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    let editor = null
    const editorRef = ref(null)
    const codeValue = computed(() => props.modelValue)

    const options = {
      mode: `ace/mode/${props.mode}`, // 设置语法模式
      theme: 'ace/theme/eclipse', // 设置主题
      fontSize: props.fontSize, // 字体大小
      showPrintMargin: false, // 隐藏边线
      showGutter: props.showGutter, // 显示行号
      enableSnippets: true, // 代码片段功能
      enableBasicAutocompletion: true, // 启用自动补全
      enableLiveAutocompletion: true, // 实时补全
      maxLines: props.maxLines, // 最大行数，超过会自动出现滚动条
      minLines: props.minLines, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
      tabSize: 2, // 制表符设置为2个空格大小
      readOnly: props.readonly,
      highlightActiveLine: true,
      value: codeValue.value
    }

    onMounted(() => {
      // 🔴 关键配置：设置Ace资源的基础路径
      ace.config.set(
        'basePath',
        'https://fastly.jsdelivr.net/npm/ace-builds@1.32.3/src-noconflict/'
        // 或本地路径：new URL('node_modules/ace-builds/src-noconflict/', import.meta.url).href
      )
      editor = window.ace.edit(editorRef.value, options)
      // 语法检查
      editor.getSession().setUseWrapMode(props.userWorker)
      // 数据更新
      editor.on('change', () => {
        if (emit) {
          emit('update:modelValue', editor.getValue())
        }
      })
    })
    onBeforeUnmount(() => {
      editor.destroy()
    })
    return { editorRef }
  }
}
</script>
